<template>
  <div id="app">
    <!-- 使用home组件 -->
    <!-- <Home></Home> -->
    <!-- 希望切换路由来显示对应的组件 -->
    <!--01: 声明式导航: 使用router-link方式实现的导航 -->
    <!-- path 和 query 是一对.配合使用,参数会出现在地址栏,获取参数参数 this.$route.query -->
    <!-- name 和 params 是一对,配合使用, 参数不会出现在地址栏,获取参数 this.$route.params -->
    <p>
      <router-link :to="'/home/' + id">首页</router-link>
      <router-link :to="{ path: '/category', query: { name: '王强' } }"
        >分类页</router-link
      >
      <router-link :to="{ name: 'car', params: { name: '吕冲' } }"
        >购物车</router-link
      >
      <router-link :to="{ path: '/mine' }" tag="span">我的</router-link>
    </p>
    <!-- 02: 编程式导航 -->
    <!-- <p v-if="$route.path != '/login'">
      <span @click="goFn({ path: '/home/' + id })">首页</span>
      <span @click="goFn({ path: '/category', query: { name: '张三' } })"
        >分类</span
      >
      <span @click="goFn({ name: 'car', params: { name: '李四' } })"
        >购物车</span
      >
      <span @click="goFn({ path: '/mine' })">我的</span>
    </p> -->

    <!-- 定义路由组件坑 (一级路由的坑)-->
    <router-view></router-view>
  </div>
</template>

<script>
// 引入home组件
// 后缀 .vue 可省略
// import Home from "./views/Home";
export default {
  name: "App",
  data() {
    return {
      id: 100,
    };
  },
  components: {
    // Home, // 在当前组件中注册组件
  },
  created() {
    // console.log("App.vue", this);
  },
  methods: {
    goFn(obj) {
      // console.log("App.vue", this);
      // 编程式导航的第一种方式
      // this.$router.push(obj.path);
      // 编程式导航的第二种方式
      this.$router.push(obj);
    },
  },
};
</script>

<style>
.router-link-active {
  background: red;
}
</style>
